<!--
 * @Author: your name
 * @Date: 2020-04-24 18:10:26
 * @LastEditTime: 2020-04-29 09:30:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \five\index.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>声撩明星联赛</title>
  <link rel="stylesheet" href="./index.css" />
</head>
<body>
  <div v-cloak id="app">
    <div class="background-image" style="background-color: #333; height: 100vh;display: none;">
      <img width="100%"
           src="https://img.alicdn.com/imgextra/i4/668603298/TB2ZuSVgQKWBuNjy1zjXXcOypXa_!!2-martrix_bbs.png">
    </div>
    <div id="main">
    <img class="head-img" src="./images/header.png" width="100%" alt="">
    <!-- 联赛奖励 -->
    <div class="award-wrapper">
      <div class="award-nav">
        <div :class="{ 'btn': true, 'charm-btn': true, 'cc-1': awardStage === 1 }" @click="changeAwardStage(1)">魅力明星</div>
        <div :class="{ 'btn': true, 'rich-btn': true, 'cc-2': awardStage === 2 }" @click="changeAwardStage(2)">富豪明星</div>
      </div>
      <div v-show="awardStage === 1" class="award-content">
        <!-- 魅力明星第一名 -->
        <img class="title award-first" src="./images/charm1.png" alt="">
        <div class="award-box one-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-0/钻石宝箱@3x.png" alt="">
            </div>
            <p>20万钻石</p>
            <p>永久</p>
          </div>
          <div class="award middle">
            <div class="gift-img">
              <img src="./images/charm-0/勋章-01@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>勋章30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-0/魅力明星-头饰1@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>头饰30天</p>
          </div>
        </div>
        <div class="award-box two-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-0/魅力明星1@2x@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>气泡30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-0/兰博基尼@3x.png" alt="">
            </div>
            <p>兰博基尼座驾</p>
            <p>30天</p>
          </div>
        </div>
        <!-- end -->

        <!-- 魅力明星第二名 -->
        <img class="title award-first" src="./images/charm2.png" alt="">
        <div class="award-box one-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-1/钻石宝箱@3x.png" alt="">
            </div>
            <p>10万钻石</p>
            <p>永久</p>
          </div>
          <div class="award middle">
            <div class="gift-img">
              <img src="./images/charm-1/魅力明星-2勋章@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>勋章30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-1/魅力明星-2头饰@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>头饰30天</p>
          </div>
        </div>
        <div class="award-box two-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-1/魅力明星1@2x@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>气泡30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/charm-1/兰博基尼@3x.png" alt="">
            </div>
            <p>兰博基尼座驾</p>
            <p>30天</p>
          </div>
        </div>
        <!-- end -->

         <!-- 魅力明星第三名 -->
         <img class="title award-first" src="./images/charm3.png" alt="">
         <div class="award-box one-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-2/钻石宝箱@3x.png" alt="">
             </div>
             <p>5万钻石</p>
             <p>永久</p>
           </div>
           <div class="award middle">
             <div class="gift-img">
               <img src="./images/charm-2/魅力明星-3勋章@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>勋章15天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-2/魅力明星-3头饰@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>头饰15天</p>
           </div>
         </div>
         <div class="award-box two-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-2/魅力明星1@2x@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>气泡15天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/charm-2/1_0002_1_0001_奥迪@3x.png" alt="">
             </div>
             <p>奥迪座驾</p>
             <p>15天</p>
           </div>
         </div>
         <!-- end -->

          <!-- 魅力明星第4-10名 -->
          <img class="title award-first" src="./images/charm4.png" alt="">
          <div class="award-box one-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-3/钻石宝箱@3x.png" alt="">
              </div>
              <p>1万钻石</p>
              <p>永久</p>
            </div>
            <div class="award middle">
              <div class="gift-img">
                <img src="./images/charm-3/魅力明星-4勋章@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>勋章7天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-3/魅力明星-4头饰@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>头饰7天</p>
            </div>
          </div>
          <div class="award-box two-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-2/魅力明星1@2x@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>气泡7天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/charm-3/1_0002_1_0001_奥迪@3x.png" alt="">
              </div>
              <p>奥迪座驾</p>
              <p>7天</p>
            </div>
          </div>
          <!-- end -->
      </div>
      <div v-show="awardStage === 2" class="award-content">
        <p class="rich-award-desc">富豪榜统计比赛时间内，用户赠送的联赛票总</p>
        <p class="rich-award-desc color-1">海选赛: 10钻=1票</p>
        <p class="rich-award-desc color-1">竞级赛: 50钻=1票</p>
        <p class="rich-award-desc color-1">复活赛: 50钻=1票</p>
        <p class="rich-award-desc color-1">总决赛: 100钻=1票</p>
        <!-- 魅力明星第一名 -->
        <img class="title award-first" src="./images/rich1.png" alt="">
        <div class="award-box one-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-0/钻石宝箱@3x.png" alt="">
            </div>
            <p>20万钻石</p>
            <p>永久</p>
          </div>
          <div class="award middle">
            <div class="gift-img">
              <img src="./images/rich-0/勋章_富豪明星1@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>勋章30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-0/勋章_富豪明星-头饰1@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>头饰30天</p>
          </div>
        </div>
        <div class="award-box two-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-0/魅力明星1备份@2x@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>气泡30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-0/兰博基尼@3x.png" alt="">
            </div>
            <p>兰博基尼座驾</p>
            <p>30天</p>
          </div>
        </div>
        <!-- end -->

        <!-- 魅力明星第二名 -->
        <img class="title award-first" src="./images/rich2.png" alt="">
        <div class="award-box one-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-1/钻石宝箱@3x.png" alt="">
            </div>
            <p>10万钻石</p>
            <p>永久</p>
          </div>
          <div class="award middle">
            <div class="gift-img">
              <img src="./images/rich-1/勋章_富豪明星2@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>勋章30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-1/勋章_富豪明星-头饰2@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>头饰30天</p>
          </div>
        </div>
        <div class="award-box two-line">
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-1/魅力明星1备份@2x@3x.png" alt="">
            </div>
            <p>声撩联赛</p>
            <p>气泡30天</p>
          </div>
          <div class="award">
            <div class="gift-img">
              <img src="./images/rich-1/兰博基尼@3x.png" alt="">
            </div>
            <p>兰博基尼座驾</p>
            <p>30天</p>
          </div>
        </div>
        <!-- end -->

         <!-- 魅力明星第三名 -->
         <img class="title award-first" src="./images/rich3.png" alt="">
         <div class="award-box one-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-2/钻石宝箱@3x.png" alt="">
             </div>
             <p>5万钻石</p>
             <p>永久</p>
           </div>
           <div class="award middle">
             <div class="gift-img">
               <img src="./images/rich-2/勋章_富豪明星3@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>勋章15天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-2/勋章_富豪明星-头饰3@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>头饰15天</p>
           </div>
         </div>
         <div class="award-box two-line">
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-2/魅力明星1备份@2x@3x.png" alt="">
             </div>
             <p>声撩联赛</p>
             <p>气泡15天</p>
           </div>
           <div class="award">
             <div class="gift-img">
               <img src="./images/rich-2/1_0002_1_0001_奥迪@3x.png" alt="">
             </div>
             <p>奥迪座驾</p>
             <p>15天</p>
           </div>
         </div>
         <!-- end -->

          <!-- 魅力明星第4-10名 -->
          <img class="title award-first" src="./images/rich4.png" alt="">
          <div class="award-box one-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-3/钻石宝箱@3x.png" alt="">
              </div>
              <p>1万钻石</p>
              <p>永久</p>
            </div>
            <div class="award middle">
              <div class="gift-img">
                <img src="./images/rich-3/勋章_富豪明星4@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>勋章7天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-3/勋章_富豪明星-头饰4@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>头饰7天</p>
            </div>
          </div>
          <div class="award-box two-line">
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-2/魅力明星1备份@2x@3x.png" alt="">
              </div>
              <p>声撩联赛</p>
              <p>气泡7天</p>
            </div>
            <div class="award">
              <div class="gift-img">
                <img src="./images/rich-3/1_0002_1_0001_奥迪@3x.png" alt="">
              </div>
              <p>奥迪座驾</p>
              <p>7天</p>
            </div>
          </div>
          <!-- end -->
      </div>
    </div>
    <!-- end -->

    <img class="ranking-title" src="./images/ranking-title.png" alt="">

    <div class="ranking-nav">
      <div :class="{ 'btn': true, 'charm-btn': true, 'cc-1': bigStage === 1 }" @click="changeBigStage(1),pauseAudio()">魅力榜</div>
      <div :class="{ 'btn': true, 'rich-btn': true, 'cc-2': bigStage === 2 }" @click="changeBigStage(2),pauseAudio()">富豪榜</div>
    </div>

    <div class="game-nav">
      <div :class="{'btn': true, 'mini': true, 'rich-btn': true, 'cc-2': stage === 1}" @click="changeStage(1),pauseAudio()">海选赛</div>
      <div :class="{'btn': true, 'mini': true, 'charm-btn': true, 'cc-1': stage === 2}" @click="changeStage(2),pauseAudio()">晋级赛</div>
      <div :class="{'btn': true, 'mini': true, 'charm-btn': true, 'cc-1': stage === 3}" @click="changeStage(3),pauseAudio()">复活赛</div>
      <div :class="{'btn': true, 'mini': true, 'charm-btn': true, 'cc-1': stage === 4}" @click="changeStage(4),pauseAudio()">总决赛</div>
    </div>

    <!-- 竞级说明 -->
    <img v-show="bigStage === 1" class="game-desc" :src="'./images/stage' + stage + '.png'" alt="图片">
    <!-- end -->

    <!-- 搜索框 -->
    <div v-show="(stage === 1 || stage ===4) && bigStage === 1" class="search-box">
      <div class="search-wrapper" @click="searchChange(0)">
        <label for="search" v-show="searchStage === 1">输入你想投票的ID</label>
        <input v-model='form2.search' id="search" class="search" type="text">
        <i></i>
      </div>
      <div class="search-btn"@click="getVoice(3)">搜一下</div>
    </div>
    <!-- end -->

    <!-- 排行榜 -->
    <div v-show="stage !== 1 || bigStage === 2" class="ranking-box">
      <table>
        <tbody>
          <tr v-for="(item, index) in winnersList" :key="'ranking-' + index" :class="{ 'ranking-item-bg': index % 2 === 1 }">
            <td width="10%" :class="{'ranking': true, 'ranking-1': index === 0, 'ranking-2': index === 1, 'ranking-3': index === 2 }">{{ index +1 }}</td>
            <td width="20%">
              <div :class= "{'ranking-img': true, 'border-1': index === 0 , 'border-2': index === 1, 'border-3': index === 2}">
                <img  :src="item.portrait" width="100%" alt="">
              </div>
            </td>
            <td width="50%">
              <p>{{ item.nickname }}</p>
              <p>ID:{{ item.uuid }}</p>
            </td>
            <td width="20%">
              {{ item.score }} 票
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- end -->

    <!-- 语音列表 -->
    <div v-show="(stage === 1 || stage ===4) && bigStage === 1" class="audio-box">
      <div v-for="(item, index) in voiceList" :class="{'audio-item': true, gap: index % 2 === 1}" :key="'five-' + index">
        <div class="tag" v-show="item.ret.length !==0">{{item.ret.length !==0 ? item.ret.timbre.label : ''}}</div>
        <div class="audio-img">
          <img  :src="item.portrait" width="100%" alt="">
        </div>
        <div class="user-info-box">
          <div class="user-info" >
            <p class="nickname">{{ item.nickname }}</p>
            <div class="Audio">
              <audio id="audioTag" class="voice" :src="item.audio_url" ></audio>
              <div class="pgs" @click="playAudio(index)">
                  <div class="pgs-play" id="progress">
                    <img src="./images/audioplay.png" :class="'audio-img1 playImg' + index" >
                  </div>
                  <div class="controls">
                    <!-- <span class="played-time">00:00</span> -->
                    <button class="play-pause" id="playPause">
                        <span class="icon-btn icon-play"></span>
                    </button>

                </div>
                  <span class="audio-time" id="audioTime"><p>{{ item.audio_time }}s</p></span>

              </div>

          </div>


          </div>
          <p class="ticket">{{ item.vote_sum_num }} 票</p>
          <!-- <div class="vote-btn" @click=" item.stage === 0  || item.stage === 3 ? showDialog(item.user_id): ''">投票</div> -->
          <div class="vote-btn" @click="showDialog(item.user_id),pauseAudio()">投票</div>
        </div>
      </div>
      <div class="page-box">
        <div class="page prev-btn" @click="getVoice(5),pauseAudio()">上一页</div>
        <div class="page next-btn" @click="getVoice(6),pauseAudio()">下一页</div>
      </div>

    </div>
    <!-- end -->



    <p class="activity-desc tt">本活动所有18岁以上完成声鉴的用户均可参加。</p>
    <p class="activity-desc">本活动最终解释权归声撩所有，与苹果公司无关。</p>

    <div v-show="dialogState" class="dialog">
      <div class="dialog-box">
        <div class="dialog-plus" @click="num_minus">-</div>
        <input v-model="form.vote_num" class="input" type="text" @input="checkNumber">
        <div class="dialog-minus" @click="num_plus">+</div>
      </div>
      <p class="dialog-desc">我的票数: {{initvote_num}}</p>

      <!-- <div class="dialog-btn"></div> -->
      <img class="dialog-btn" src="./images/vote-btn.png" alt="" @click="toVote()">
    </div>
    <img v-if ="code" class="bottom-img" src="./images/底导航备份@3x.png" alt="" @click="download()">
    <img v-else class="bottom-img" src="./images/bottom-nav.png" alt="" @click="toShareNoQrcode()">
     <!-- 遮罩层 -->
     <!-- <div v-show="dialogState" class="overlay" @click.stop="showDialog(false)"></div> -->
     <div v-show="overlayShow" class="overlay" @click.stop="closeAllDialog()"></div>
     <!-- end -->
     <!-- 输入手机号遮罩层 -->
    <div v-show="dialogShow" id="phone-dialog">
      <p class="phone-desc">加入声撩，为TA助力</p>
      <input v-model="form1.phone" class="phone-input" type="text" @input="checkPhone()">
      <div :class="[{ 'liao-btn-no': canSubmit }, 'liao-btn']" @click="canSubmit ? bindPhone() : ''">
        去APP助力
      </div>
    </div>
    <!-- 消息弹窗 -->
    <div id="over-dialog" v-show="canShowTip">
      <div class="close" @click="canShowTip = false"></div>
      <p>{{ msg }}</p>
      <div class="btn" @click="closeAllDialog()">
        知道啦
      </div>
    </div>
    <!-- end -->
  </div>
  </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/tool.js"></script>
<script src="./js/flex.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    data: {
     stage: 1,
     bigStage: 1,
     awardStage: 1,
     dialogState: false,
    //  baseUrl: 'http://xs.ztaudio-activity.com',
     baseUrl: 'http://ztaudio-activity.kekestar.cn',
    //  apiUrl: 'http://47.100.52.89',
     apiUrl: "https://sl-api.bianxiangapp.com:8866",
     winnersList: [],
     richList: [],
     voiceList: [],//语音数据
     form: {
      user_id: '',
      to_user_id: '',
      vote_num: 0,
      stage:''
     },
     query: {
       page: 1,
       limit: 8,
       search:''
     },
     form1:{
       phone:'',
       code: ''
     },
     form2:{
       search:''
     },
     user: {
        nickname: '',
        headimg: '',
        portrait:'',
        qrCode: '',
        uuid: '',
        register_at: '',
        code: '',
        grand_total: 0,
        current_month_total: 0,
        user_id: 0
      },

     searchStage: 1,//搜索框文字
     overlayShow: false,
     dialogShow: false,//输入手机号弹出层
     canSubmit: false,
     initvote_num:'',//用户可用投票数
     msg: '',
     canShowTip:false,
     staticVoteNum:0,
     code:'',
     share:''
    },
    computed: {
      textUrl: function(){
        return this.baseUrl + "/five/index.html";
      },
      // voteNum: function(){
      // }
    },
    watch: {
      voiceList: function() {
        this.$nextTick(function() {
          this.listenerAudioPlay()
          // this.watchAudio()
        })
      }
    },
    mounted() {
      this.getCurrentUserInfo()
      // kk.env = 'production'
      // this.getVoice()
      this.initVoteNum()
      if( this.stage ){
        this.changeStage(this.stage)
      }
    },
    created(){
      // this.listenerAudioPlay()
      this.stage = Number(kk.$_GET['stage']) ? Number(kk.$_GET['stage']):1
      //分享页面底图
      this.code = typeof kk.$_GET['code'] === 'undefined'?'': kk.$_GET['code']
    },

    methods: {
      changeAwardStage(stage) {
        this.awardStage = stage
        this.awardGift = stage === 1 ? 'charm' : 'rich'
      },
      changeBigStage(stage) {
        this.bigStage = stage
        this.changeStage(1)
      },
      changeStage(stage) {
        this.stage = stage
        this.bigStage === 1 ? this.getCharm() : this.getRich()
        this.form2.search = ''
        if(stage ===4||stage==1){
          this.getVoice(stage);
        }
      },
      getCharm() {
        let _this = this
        kk.ajaxGet(_this.baseUrl + '/five/winner', { stage: _this.stage }, function(res) {
          _this.winnersList = res.data
        })
      },
      getRich() {
        let _this = this
        if(_this.stage === 1) _this.winnersList = []
        kk.ajaxGet(_this.baseUrl + '/five/rich', { stage: _this.stage }, function(res) {
          _this.winnersList = res.data
        })
      },

      //用户搜索
      searchChange(code) {
        this.searchStage = code
      },

      //语音列表 path:0 上一页 1下一页 2当前页 3通过user_id搜索
      getVoice(path) {
        let _this = this


        if(path === 5 && _this.query.page > 1) {
          _this.query.page--
        }

        if(path === 6 ) {
          _this.query.page++
        }
        if(path === 2) {
          _this.query.page
        }
        if(path === 3) {
          if(this.form2.search =='') {
            this.query = {
              page: 1,
              limit: 8,
            }
          }else{
            this.query = {
              search: this.form2.search,
              stage: this.stage
            }
            // this.query.search = this.form2.search,
            // this.query.stage =  this.stage
          }
        }
        if(path === 4||path ===1) {
          // this.query = {
          //     stage: this.stage
          //   }
          this.query.stage=this.stage
        }
        this.pauseAudio()
        kk.ajaxGet(_this.baseUrl + '/five/voice', _this.query, function(res) {
          // console.log(JSON.stringify(res.data.ret))
          _this.voiceList = res.data
          if(res.data.length==0){
            _this.msg = res.message
            _this.canShowTip = true
          }

        })
      },

      showDialog(user_id) {
          this.form.to_user_id = user_id
          this.form.user_id = this.user.user_id
          this.dialogState = true
          this.overlayShow = true
          // this.toVote()
      },
      closeAllDialog() {
        this.overlayShow = false
        this.dialogShow = false
        this.dialogState = false
        this.canShowTip = false
        this.resetForm()
      },
      resetForm() {
        this.form = {
          user_id: 0,
          to_user_id: '',
          vote_num: 0
        }
        this.form1 = {
          phone: ''
        }
        this.initVoteNum()
      },
      //用户投票
      toVote() {
        let _this = this
        _this.form.stage = this.stage
        // _this.form.user_id = 70
        // _this.form.to_user_id = 70
        if(_this.form.user_id ==_this.form.to_user_id){
          _this.msg = '不符合投票规则'
          _this.canShowTip = true
          return false
        }
        if(this.staticVoteNum == 0){
          _this.msg = '今日投票次数用光啦，去派对送ta联赛票继续助力吧！'
          _this.canShowTip = true
          return false
        }
        if(!_this.form.vote_num){ return false}

        if(this.staticVoteNum >= this.form.vote_num ){
          kk.ajaxPost(_this.baseUrl + '/five/vote', _this.form, function(res) {
          let {code,message} = res
          if(code == 200) {
            _this.getVoice(2)
            _this.msg = message
            _this.canShowTip = true
            _this.initVoteNum()
            _this.getCharm()
            _this.dialogState = false
          }
        })
        }
        // _this.msg = '不符合规则'
        // _this.canShowTip = true

      },
      num_minus(){
        let _this = this
        if(_this.form.vote_num > 0){
          _this.form.vote_num--
          this.initvote_num++
        }
      },
      num_plus(){
        let _this = this
        if( _this.form.vote_num < this.staticVoteNum && this.initvote_num > 0){
          _this.form.vote_num++
          this.initvote_num--
        }
      },
      //获取用户信息
      getCurrentUserInfo() {
        let _this = this
        kk.ajaxGet(_this.baseUrl + '/convene/invite/' + kk.$_GET['user_id'], {}, function(res) {
          _this.user = res.data.user_info
        })

      },
      toShareNoQrcode() {
        // alert(this.user.portrait)
        kk.share(this.user.portrait,'声撩的夏天','想成为明星，就差你的投票啦~', this.baseUrl +"/five/share.html?code=" + this.user.code+"&stage="+this.stage)
      },
      //分享弹窗
      download(state) {

        if (/(iPhone|iPad|iPod|iOS)/i.test( navigator.userAgent)) {
            this.redirect_url = "https://itunes.apple.com/cn/app/id1507139957"
            this.showDialog_share(true)
        } else {
            if (navigator.userAgent.toLowerCase().indexOf('micromessenger') > -1) {
                document.getElementById("main").style.display = "none"
                document.getElementsByClassName("background-image")[0].style.display = "block"
            }else{
              this.redirect_url = "https://ztaudio-api.kekestar.cn/system/version/get?channel_id=600000"
              this.showDialog_share(true)
            }
        }
      },
      checkPhone() {
        let _this = this
        if(!(/^1[3456789]\d{9}$/.test(this.form1.phone))){
          _this.canSubmit = false
        }  else {
          _this.canSubmit = true
        }
      },
      bindPhone() {
        let _this = this
        _this.form1.code = _this.user.code
        kk.ajaxGet(_this.baseUrl + '/five/bindPhone', _this.form1, function(res) {
          let { code, message } = res
          if(code === 200){
            _this.closeAllDialog(false)
            window.location.href = _this.redirect_url
          } else {
            _this.msg = message
            _this.canShowTip=true
          }
          })
      },
      showDialog_share(state) {
        this.overlayShow = state
        this.dialogShow = state
        this.canSubmit = false
      },

      initVoteNum(){
        let _this = this
        kk.ajaxGet(_this.baseUrl + '/five/initVoteNum', { user_id: _this.user.user_id?_this.user.user_id: kk.$_GET['user_id']}, function(res) {
          let { code, data,message } = res
          if(code === 200){
            _this.initvote_num = data
            _this.staticVoteNum = data
          }
        })
      },

      listenerAudioPlay() {
        let audioObj = document.getElementsByClassName('voice')
        let imgObj = document.getElementsByClassName("audio-img1")
        for(let i=0,len = audioObj.length; i<len;i++) {
          audioObj[i].addEventListener('ended',function() {
            for(let k=0, len = audioObj.length; k < len; k++) {
              if(i == k) {
                // audioObj[k].pause()
                imgObj[k].setAttribute('src', './images/audioplay.png')
              }
            }
          }
          )
        }
      },

      playAudio(index) {
        let audioObj = document.getElementsByClassName('voice')
        let imgObj = document.getElementsByClassName("playImg" + index)
        let imgObjall = document.getElementsByClassName("audio-img1")

        for(let i=0,len = audioObj.length; i<len;i++) {
         audioObj[i].pause()
         imgObjall[i].setAttribute('src', './images/audioplay.png')
          if(index === i) {
           audioObj[i].play()
           imgObj[0].setAttribute('src', './images/audiopause.png')
         }

        }
      },
      //音频暂停
      pauseAudio() {
        let audioObj = document.getElementsByClassName('voice')
        let imgObjall = document.getElementsByClassName("audio-img1")
        for(let i=0,len = audioObj.length; i<len;i++) {
         audioObj[i].pause()
         imgObjall[i].setAttribute('src', './images/audioplay.png')
        }
      },
      checkNumber() {
        if(this.form.vote_num < 0 ) {
          this.form.vote_num = 0
        }
        if( Number(this.form.vote_num) > Number(this.staticVoteNum)) {
          this.form.vote_num = this.staticVoteNum
        }
      }
    },
  })
</script>
</html>
